<template>
  <view class="ikz-bid">
    <ikz-loading :css-data="loading_css"></ikz-loading>
    <view class="ikz-orderdetail" v-if="loadEnd">
      <view class="ikz-tips">
        <view class="ikz-tips-title" v-if="show_info.status == 0">
          未支付订单
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 1">
          订单待接单
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 2">
          订单待收货
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 3">
          订单已完成
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 4">
          订单已取消
        </view>
      </view>
      <view class="ikz-orderdetail-main">
        <view class="store-info">
          <image
            class="img"
            :src="adminImgPath + show_info.business_logo_image"
            mode="aspectFill"
          ></image>
          <view class="name">{{ show_info.business_name }}</view>
        </view>
        <view class="order-info">
          <view class="title">订单信息</view>
          <view class="cont">
            <view class="tag">
              <text>订单号码</text>
              <text>{{ show_info.order_no }}</text>
            </view>
            <view class="tag">
              <text>下单时间</text>
              <text>{{ show_info.createtime }}</text>
            </view>
            <view class="tag">
              <text>配送方式</text>
              <text v-if="show_info.delivery == 1">到店自取</text>
              <text v-if="show_info.delivery == 2">校园跑腿</text>
            </view>
            <view class="tag" v-if="show_info.remarks">
              <text>订单备注</text>
              <text>{{ show_info.remarks }}</text>
            </view>
            <view class="tag" v-if="show_info.address">
              <text>商家地址：</text>
              <div style="display: flex; align-items: center">
                <text>{{ show_info.address }}</text>
                <text class="copy-btn" @click="copyAddress(show_info.address)"
                  >复制</text
                >
              </div>
            </view>
          </view>
        </view>
        <view class="goods-info">
          <view
            class="column"
            v-for="(item, index) in show_info.goods_list"
            :key="index"
          >
            <image
              class="left"
              :src="adminImgPath + item.image"
              mode="aspectFill"
            ></image>
            <view class="center">
              <view class="name">{{ item.name }}</view>
              <view class="num">X{{ item.goods_count }}</view>
            </view>
            <view class="right"
              ><text>￥</text>{{ item.price * item.goods_count }}</view
            >
          </view>
          <view class="price-total">
            <view class="tag">价格合计</view>
            <view class="price"><text>￥</text>{{ show_info.total_fee }}</view>
          </view>
        </view>
      </view>
      <view class="ikz-bottom" v-if="show_info.status == 0">
        <view class="btn-box-left">
          <view class="priceBox">
            <view class="hx-color-white"
              ><text>￥</text>{{ show_info.total_fee }}</view
            >
          </view>
        </view>
        <view class="btn-box-right" @click="payment()">
          <view class="jiesuan">立即支付</view>
        </view>
      </view>
      <view
        class="ikz-bottom"
        v-if="show_info.status == 1 || show_info.status == 2"
      >
        <view class="ikz-help-btn1" @click="cancel(show_info.id)"
          >取消订单</view
        >
        <view
          class="ikz-help-btn2"
          v-if="show_info.status == 2"
          @click="showQRCode"
          >查看取件码</view
        >
      </view>
      <!-- <view class="ikz-bottom" v-if="show_info.status == 2">
        <view class="ikz-help-btn2" @click="submit(show_info.id)"
          >确认取货</view
        >
      </view> -->
    </view>

    <!-- list -->

    <!-- 二维码弹框 -->
    <uni-popup ref="qrPopup" type="center">
      <view class="qr-popup">
        <canvas
          canvas-id="qrCodeCanvas"
          style="width: 200px; height: 200px"
        ></canvas>

        <view class="qr-tip">请出示取件码，完成取货。</view>
      </view>
    </uni-popup>
  </view>
</template>

 <script>
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
import ikzOrderdetail from "@/pages/Component/Public/Orderdetail/public/orderdetail/orderdetail.vue";
import ikzTopbg from "@/pages/Component/Public/Topbg/public/topbg/topbg.vue";
var app = getApp();

import QRCode from "weapp-qrcode";

import ikz from "@/pages/Common/tools.js";
export default {
  components: {
    ikzLoading,
    ikzOrderdetail,
    ikzTopbg,
  },
  data() {
    return {
      template_id: {},
      qrCodeUrl: "", // 二维码图片地址
      adminImgPath: app.globalData.adminImgPath,
      id: "",
      loading_css: {
        display: "flex",
      },
      show_info: {},
      show_status: 2,
      loadEnd: false,
      qrCodeCanvasId: "qrCodeCanvas",
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.detailInfo((res) => {
      this.loading_css.display = "none";
      // this.generateQRCode(
      //   "/pages/Component/merchant/order/details/index?id=${this.id}`"
      // );
    });
  },
  onPullDownRefresh() {
    this.detailInfo((res) => {
      uni.stopPullDownRefresh();
      // this.generateQRCode(
      //   "/pages/Component/merchant/order/details/index?id=${this.id}`"
      // );
    });
  },
  onShow() {
    this.templateId((res) => {
      this.loading_css.display = "none";
    });
    if (this.show_status == 2) {
      this.show_status = 3;
    } else {
      this.detailInfo((res) => {
        this.loading_css.display = "none";
        this.generateQRCode(); // 数据加载完成后生成二维码
      });
    }
  },
  methods: {
    showQRCode() {
      this.$refs.qrPopup.open();
      this.generateQRCode(
        `/pages/Component/merchant/order/details/index?id=${this.id}&scanCode=true`
      );
    },
    // 生成二维码
    generateQRCode(url) {
      let qrcode = new QRCode({
        text: url, // 二维码的内容
        width: 200, // 二维码的宽度，单位是px
        height: 200, // 二维码的高度，单位是px
        canvasId: this.qrCodeCanvasId, // 用于渲染的canvas的ID
        componentInstance: this, // 组件实例，用于渲染canvas的上下文环境（小程序中需要）
      });
      // qrcode.make(); // 生成二维码

      // const path = `/pages/Component/merchant/order/details/index?id=${this.id}`;
      // const canvas = document.getElementById("qrcodeCanvas");

      // QRCode.toCanvas(canvas, path, (error) => {
      //   if (error) {
      //     console.error("生成二维码失败", error);
      //     return;
      //   }
      //   this.qrCodeUrl = canvas.toDataURL();
      // });
    },

    //请求页面数据
    detailInfo(fn) {
      var path = "/xyb/supermarket/order/detail";
      var data = {
        id: this.id,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.show_info = res.data.data;
          for (var i in res.data.data.goods_list) {
            this.show_info.goods_list[i].total_price = parseFloat(
              res.data.data.goods_list[i].goods_count *
                res.data.data.goods_list[i].price
            ).toFixed(2);
          }
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        this.loadEnd = true;
        fn();
      });
    },
     //获取模板参数
    templateId(fn) {
      var path = "/xyb/wechat_mini_push/template_id_list";
      var data = {};
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.template_id = res.data.data;
          console.log("template_id的值", this.template_id);
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    //取消订单
    cancel(id) {
      const _this = this;
      var temp_id = [
        // this.template_id.user_apply_cancel,
        this.template_id.business_refuse_user,
      ];

      uni.requestSubscribeMessage({
        tmplIds: temp_id,
        success(res) {
          _this.processCancelOrder(id);
        },
        fail(res) {
          // that.up_status == 2;
          if (res.errCode == 20004) {
            uni.showModal({
              title: "提示",
              content: "请前往设置打开接受通知",
              confirmText: "确定",
              success(res) {
                _this.processCancelOrder(id);
              },
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "未订阅消息，无法接收到订单通知",
              confirmText: "确定",
              success(res) {
                _this.processCancelOrder(id);
              },
            });
          }
        },
      });
    },
    processCancelOrder(id) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "确定取消订单？",
        success: function (res) {
          if (res.confirm) {
            var path = "/xyb/supermarket/order/cancel";
            var data = {
              id: id,
            };
            uni.showLoading({
              title: "加载中",
              mask: true,
            });
            ikz.post(path, data, (res) => {
              if (res.data.code) {
                uni.showToast({
                  title: "取消成功",
                  duration: 2000,
                });
                setTimeout(function () {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 2000);
                that.$forceUpdate();
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                  success: function (res) {},
                });
              }
              uni.hideLoading();
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 确认取货
    // submit(id) {
    //   var that = this;
    //   uni.showModal({
    //     title: "提示",
    //     content: "确定货物已送达？",
    //     success: function (res) {
    //       if (res.confirm) {
    //         var path = "/xyb/supermarket/order/confirm_complete";
    //         var data = {
    //           id: id,
    //         };
    //         uni.showLoading({
    //           title: "加载中",
    //           mask: true,
    //         });
    //         ikz.post(path, data, (res) => {
    //           if (res.data.code) {
    //             uni.showToast({
    //               title: "确认取货成功",
    //               duration: 2000,
    //             });
    //             that.detailInfo((res) => {});
    //             that.$forceUpdate();
    //           } else {
    //             uni.showModal({
    //               title: "提示",
    //               content: res.data.msg,
    //               showCancel: false,
    //               success: function (res) {},
    //             });
    //           }
    //           uni.hideLoading();
    //         });
    //       } else if (res.cancel) {
    //         console.log("用户点击取消");
    //       }
    //     },
    //   });
    // },
    // 复制地址
    copyAddress(address) {
      uni.setClipboardData({
        data: address,
        success: () => {
          uni.showToast({
            title: "地址已复制",
            icon: "none",
          });
        },
      });
    },
    // 调起小程序微信支付
    payment() {
      uni.showLoading({
        mask: true,
        title: "正在请求支付...",
      });
      var path = "/xyb/supermarket/order/wx_minapp_pay";
      var data = {
        order_no: this.show_info.order_no,
      };
      ikz.post(path, data, (res) => {
        console.log("调起小程序微信支付 ", res);
        uni.hideLoading();
        if (res.data.code == 1) {
          wx.requestPayment({
            timeStamp: res.data.data.timeStamp,
            nonceStr: res.data.data.nonceStr,
            package: res.data.data.package,
            signType: res.data.data.signType,
            paySign: res.data.data.paySign,
            success: (res) => {
              console.log("success", res);
              if (res.errMsg == "requestPayment:ok") {
                uni.showToast({
                  title: "支付成功",
                  duration: 2000,
                  icon: "success",
                });
                uni.navigateTo({
                  url:
                    "/pages/Component/supermarket/Program/store/success?id=" +
                    this.id +
                    "&type=" +
                    this.show_info.delivery +
                    "&address=" +
                    this.show_info.address,
                });
              }
            },
            fail: (res) => {
              console.log("fail", res);
              uni.showToast({
                title: "支付失败，请稍后再试",
                duration: 2000,
                icon: "none",
              });
            },
            complete: (res) => {
              console.log("complete", res);
            },
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>
 
 <style lang="scss">
.qr-popup {
  background: #fff;
  padding: 40rpx;
  border-radius: 16rpx;
  text-align: center;

  .qr-tip {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.ikz-help-btn2 {
  width: 45%;
  height: 100%;
  background: #4cd964;
  border-radius: 50rpx;
  color: #fff;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.qrcode-box {
  margin: 40rpx auto;
  text-align: center;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;

  .qrcode-image {
    width: 300rpx;
    height: 300rpx;
  }

  .qrcode-tip {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #666;
  }
}

.copy-btn {
  margin-left: 10rpx;
  color: #007aff;
  font-size: 22rpx;
}

page {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
}

.ikz-orderdetail {
  padding: 29rpx;
}

.ikz-tips-title {
  font-weight: 600;
  font-size: 29rpx;
  line-height: 40rpx;
}

.ikz-orderdetail-main {
  margin-top: 29rpx;

  .store-info {
    padding: 29rpx;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 9rpx;

    .img {
      width: 58rpx;
      height: 58rpx;
    }

    .name {
      font-weight: 600;
      font-size: 29rpx;
      line-height: 40rpx;
      color: #333333;
      margin-left: 22rpx;
      flex: 1;
    }
  }

  .order-info {
    padding: 29rpx;
    background: #fff;
    border-radius: 9rpx;
    margin-top: 15rpx;

    .title {
      font-weight: 600;
      font-size: 25rpx;
      line-height: 29rpx;
      color: #333333;
      padding-bottom: 22rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    }

    .cont {
      .tag {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 22rpx;
        line-height: 29rpx;
        color: #979797;
        margin-top: 22rpx;

        text:last-child {
          max-width: 60vw;
          word-break: break-all;
          word-wrap: break-word;
        }
      }
    }
  }

  .goods-info {
    background: #ffffff;
    border-radius: 9rpx;
    padding: 29rpx;
    margin-top: 20rpx;

    .column {
      margin-bottom: 29rpx;
      display: flex;

      .left {
        width: 102rpx;
        height: 102rpx;
        border-radius: 9rpx;
      }

      .center {
        flex: 1;
        margin: 0 29rpx;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        .name {
          width: 100%;
          font-weight: 600;
          font-size: 26rpx;
          line-height: 29rpx;
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 2;
        }

        .num {
          width: 100%;
          font-weight: 400;
          font-size: 22rpx;
          line-height: 29rpx;
          color: #979797;
        }
      }

      .right {
        font-weight: 600;
        font-size: 33rpx;
        line-height: 29rpx;
        color: #333333;

        text {
          font-size: 22rpx;
        }
      }
    }

    .price-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      padding-top: 29rpx;

      .tag {
        font-weight: 400;
        font-size: 25rpx;
        line-height: 29rpx;
      }

      .price {
        font-weight: 600;
        font-size: 33rpx;
        line-height: 29rpx;
        color: #333333;

        text {
          font-size: 22rpx;
        }
      }
    }
  }
}

.ikz-bottom {
  position: fixed;
  z-index: 999;
  display: flex;
  bottom: 15px;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 50px;
  width: calc(100% - 32px);

  .btn-box-left {
    height: 100%;
    flex: auto;
    display: flex;
    justify-content: flex-start;
    align-self: center;
    align-items: center;
    background: #222222;
    border-top-left-radius: 100upx;
    border-bottom-left-radius: 100upx;
    padding-left: 17rpx;

    .priceBox {
      flex: auto;
      margin-left: 22rpx;

      .hx-color-white {
        font-weight: 600;
        font-size: 33rpx;
        line-height: 29rpx;
        color: #fff;

        text {
          font-size: 22rpx;
        }
      }
    }
  }

  .btn-box-right {
    width: 170rpx;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-self: center;
    align-items: center;

    .jiesuan {
      width: 100%;
      height: 100%;
      font-size: 28upx;
      border-top-right-radius: 100upx;
      border-bottom-right-radius: 100upx;
      text-align: center;
      display: flex;
      justify-content: center;
      align-self: center;
      align-items: center;
      background: linear-gradient(45deg, #ffeb3b, #ffc107);
      font-weight: bold;
    }
  }
}

.ikz-help-btn1 {
  width: 100%;
  height: 100%;
  background: #ff7f7f;
  border-radius: 50rpx;
  color: #fff;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.ikz-help-btn2 {
  width: 100%;
  height: 100%;
  background: #fbc12d;
  border-radius: 50rpx;
  color: #fff;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
}
</style>
 